<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" height=80vh :row-class-name="tableRowClassName">
            <el-table-column label="分享名" prop="name" width="650">
            </el-table-column>
            <el-table-column label="大小/MB" prop="size" width="150">
            </el-table-column>
            <el-table-column label="截止时间" prop="expireTime" width="200">
            </el-table-column>
            <el-table-column label="查看" width=auto>
                <template slot-scope="scope">
                    <span class="el-dropdown-link" @click="viewShareLink(scope.row)"
                        v-if="new Date(scope.row.expireTime) > new Date()">查看分享链接</span>
                        <el-tag  v-else type="danger">已过期</el-tag>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
import ShareAPI from '../../api/share'

const options = {
    data() {
        return {
            tableData: [],
            urllink:''
        }
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (new Date(row.expireTime) > new Date()) {
                return 'success-row';
            } else {
                return 'warning-row'
            }
        },
        getList() {
            ShareAPI.getShareList().then(res => {
                this.tableData = res.data.data
                console.log(this.tableData)
            })
        },
        viewShareLink(row) {
            let routeUrl = this.$router.resolve({
                path: '/sharelink/'+row.shareId
            });
            window.open(routeUrl.href, '_blank')
        }
    },
    created() {
        //自动加载indexs方法
        this.getList();
    },
}
export default options


</script>
<style>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>